<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<jsp:include page="/WEB-INF/views/common/header.jsp" />

<link rel="stylesheet" href="<c:out value="${pageContext.request.contextPath}"/>/resources/common/bootstrap/css/bootstrap-datepicker.min.css">

<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/js/delivery_dept_popup.js"></script>
<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/js/customer_popup.js"></script>
<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/common/bootstrap/js/bootstrap-datepicker.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var firstdate;
		
		var startdate = $('#release_start_date').datepicker({
			format: "yyyy-mm-dd",
			autoclose: true,
			todayHighlight: true
		}).on('changeDate', function(ev) {
			firstdate = ev.date.valueOf();
		});
		
		$('#release_end_date').datepicker({
			format: "yyyy-mm-dd",
			autoclose: true,
			todayHighlight: true,
		});
		
		$('#firstaction_list').click(function(event) {
			var row = $(event.target).closest('tr');
			
			var firstactionCode = row.find('td:nth(1)').text().trim();
			var returnType 		= $('#return_type').val();
			
			$.ajax({
				url:"firstaction_release_card/detailList",
				data:{firstactionCode:firstactionCode, returnType:returnType},
				type:'GET',
				dataType:'json'
			}).done(function(data) {
				$('#firstaction_detail_list').bootstrapTable('load', data);
			});
		});
	});
	
	function init() {
		$.ajax({
			url:'cm_common/list',
			data:{companyCode:'1000', majorCode:'TMO39'},
			type:'GET',
			dataType:'json'
		}).done(function(data) {
			if ( data != null && data.length > 0 ) {
				$("#return_type").append($('<option>', { value: '', text: '' }));
				
				$.each(data, function(i, o) {
					$("#return_type").append($('<option>', { value: o['minorCode'], text: o['minorName'] }));
				});
			}
		});
	}
	
	function firstActionRetrieve() {
		var deptCode 		= $('#dept_code').val();
		var startDate 		= $('#start_date').val();
		var endDate			= $('#end_date').val();
		var customerCode 	= $('#customer_code').val();
		var returnType 		= $('#return_type').val();
		
		if ( deptCode == null || deptCode.trim().length == 0 ) {
			alert("부서 선택은 필수입니다.");
			return;
		}
		
		if ( startDate == null || startDate.trim().length == 0 
				|| endDate == null || endDate.trim().length == 0 ) {
			alert("출고기간 선택은 필수입니다.");
			return;
		}

		$.ajax({
			url:"firstaction_release_card/list",
			data:{deptCode:deptCode, startDate:startDate, endDate:endDate, customerCode:customerCode, returnType:returnType},
			type:'GET',
			dataType:'json'
		}).done(function(data) {
			$('#firstaction_list').bootstrapTable('load', data);
		});
	};
	
</script>

</head>
<body onload="init();">
	<jsp:include page="/WEB-INF/views/main/menu.jsp" />

	<div class="container">
		<div class="page-header">
			<h3>선조치 출고증</h3>
		</div>
		<form class="form-inline">
			<h4>출고 대상 조회 조건</h4>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group form-group-sm">
						<label class="control-label" for="dept_code" style="width: 100px;">출고부서</label> 
						<input type="text" class="form-control" id="dept_code" placeholder="출고 부서코드" disabled>
						<div class="input-group">
							<input type="text" class="form-control" id="dept_name" placeholder="출고 부서명" disabled> 
							<span class="input-group-btn"> 
								<input type="button" class="btn btn-primary btn-sm" id="repair_order_dept_btn" value="선택" />
							</span>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group form-group-sm">
						<label class="control-label" for="release_term" style="width: 100px">출고기간</label> 
						<div class="input-group date" id="release_start_date">
  							<input type="text" class="form-control" size="15" disabled="disabled" id="start_date">
  								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
						</div>
						<label class="control-label" for="release_term" style="width: 100px; text-align:center;">~</label> 
						<div class="input-group date" id="release_end_date">
  							<input type="text" class="form-control" size="15" disabled="disabled" id="end_date">
  								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
						</div>
					</div>
				</div>
			</div>
			<p />
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group form-group-sm">
						<label class="control-label" for="customer_code" style="width: 100px">고객</label> 
						<input type="text" class="form-control" id="customer_code" placeholder="고객 코드" disabled>
						<div class="input-group">
							<label class="sr-only" for="customer_name">고객명</label> 
							<input type="text" class="form-control" id="customer_name" placeholder="고객 명" disabled> 
							<span class="input-group-btn">
								<input type="button" class="btn btn-primary btn-sm" id="customer_btn" value="선택"/>
							</span>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="form-group form-group-sm">
						<label class="control-label" for="return_type" style="width: 100px">반납유형</label>
						<select class="form-control input-lg" style="width: 170px;" id="return_type">
						</select> 
					</div>
				</div>
				<div class="col-sm-2">
						<a href=""><input type="button" class="btn btn-primary btn-sm btn-block" id="print_btn" value="출력"></a>
				</div>
			</div>
			<p />
			<hr />
			<div class="row">
				<div class="col-sm-offset-10 col-sm-2">
					<input type="button" class="btn btn-primary btn-sm btn-block" id="retrieve_btn" value="조회" onclick="firstActionRetrieve()">
				</div>
			</div>
			<p />
		</form>
		<table id="firstaction_list" data-toggle="table"
			<%-- data-url="<c:out value="${pageContext.request.contextPath}"/>/resources/test_data/data.json" --%>
			data-height="400" data-pagination="true" data-search="false">
			<thead>
				<tr>
					<th data-field="state" data-checkbox="true"></th>
					<th data-field="firstactionCode" data-align="center">선조치 출고번호</th>
					<th data-field="customerName" data-align="center">고객</th>
					<th data-field="operatorName" data-align="center">운용국</th>
					<th data-field="actionDate" data-align="center">조치일</th>
				</tr>
			</thead>
		</table>
		<p />
		<hr />
		<table id="firstaction_detail_list" data-toggle="table"
			<%-- data-url="<c:out value="${pageContext.request.contextPath}"/>/resources/test_data/data.json" --%>
			data-height="250" data-pagination="true" data-search="false">
			<thead>
				<tr>
					<th data-field="state" data-checkbox="true"></th>
					<th data-field="serialNo" data-align="center">Serial No.</th>
					<th data-field="modelCode" data-align="center">기종코드</th>
					<th data-field="itemCode" data-align="center">품목코드</th>
					<th data-field="itemName" data-align="center">품명</th>
					<th data-field="revision" data-align="center">REVISION</th>
					<th data-field="requestReason" data-align="center">요청사유</th>
					<th data-field="description" data-align="center">비고</th>
				</tr>
			</thead>
		</table>
	</div>
	<div class="modal fade" role="dialog" id="modal_div">
		<div class="modal-dialog">
			<div class="modal-content"></div>
		</div>
	</div>
</body>
</html>